<template>
  <div>
    <headTop></headTop>
    <div style="margin-top: 10px">
     <el-button type="info" @click="selecetMutily()" v-if="show == false">批量选择</el-button>
          <el-button type="info" @click="selecetMutily()" v-else>取消选择</el-button>

      <el-button type="warning" @click="deleteMutily()" :disabled='isDeleteEnable'>批量删除</el-button>
      <el-button type="primary" @click="clickAddunit()">添加职位</el-button>
    </div>

      <el-table
        :data="positionList"
        border
        style="width: 100%; margin-top: 10px"
        @selection-change="handleSelectionChange"
        :key="itemKey"
        ref="positionTable"
      >
        <el-table-column v-if="show" type="selection" width="55">
        </el-table-column>
        <el-table-column type="index" width="50" label="序号" align="center">
        </el-table-column>
        <el-table-column
          prop="name"
          label="职位名称"
          align="center"
        ></el-table-column>
        <el-table-column label="所属部门" prop="departName" align="center">
        </el-table-column>
        <el-table-column  fixed="right" label="操作" align="center">
          <template  slot-scope="scope">
            <el-button type="text" :disabled='!isDeleteEnable' @click="handleEditClick(scope.$index,scope.row)">编辑</el-button>
            <el-button type="text" :disabled='!isDeleteEnable' @click="removeUnit(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :page-size="20"
        layout="prev, pager, next"
        :total="totalCount"
        @current-change="currentPageChange"
      >
      </el-pagination>

      <atoast
        :show="isAddShow"
        :title = 'isEdit ? "修改职位":"添加职位"'
        :buttonTitle = 'isEdit ? "修改" : "添加"'
        v-on:handleClick="handleClick"
        v-on:closehandle = "closehandle"
      >
        <el-form
          ref="form"
          :model="form"
          label-width="80px"
          style="margin-top: 20px"
        >
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="所属部门" prop="enable">
            <el-select v-model="departId" filterable placeholder="请选择">
            <el-option
              v-for="item in departList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          </el-form-item>
        </el-form>
      </atoast>
  </div>
</template>
<script>
import search from "@/components/searchView";
import headTop from "@/components/headTop";
import { formatDate } from "@/utils/mUtils";
import atoast from "@/components/AToast";
import { getPositionList, insertPosition, updatePosition, deletePosition } from "@/api/getData";
export default {
  inject: ["reload"],
  data() {
    return {
      direction: "rtl",
      positionList: [],
      totalCount: 0,
      currentPage: 0,
      currentPageSize: 20,
      pageCount: 1,
      form: {
        name: "",
        departId: 1,
        id:0
      },
      show: false,
      isAddShow:false,
      multiSelectes: [],
      dialogVisible: false,
      itemKey:'',
      isDeleteEnable:true,
      isEdit:false,
      editIndex:0,
      departList: this.$store.getters.departList,
      departId: "",

    };
  },
  mounted() {
    this.getPositionList();
  },
  components: {
    search,
    headTop,
    atoast,
  },
  methods: {
      selecetMutily(){
      this.show = !this.show;
      this.$refs.positionTable.clearSelection();
      },
    deleteMutily() {
      var ids = [];
      this.multiSelectes.forEach((element) => {
        ids.push(element.id);
      });
      var idPas = ids.join(",");
      if (!idPas.length) {
        return;
      }
      this.$confirm("是否批量删除选择的职位, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.removeUnits(idPas);
           this.show = false;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消删除",
          });
        });
    },
    clickAddunit() {
      this.isAddShow = true;
      this.isEdit = false;
      this.$refs["form"].resetFields();

    },
    handleSelectionChange(val) {
         this.isDeleteEnable = !val.length;
         this.multiSelectes = val;
    },
    closehandle(){
         this.isAddShow = false;
        this.departId  = '';

    },
    handleEditClick(index,row) {
        this.isAddShow = true;
        this.isEdit = true;
        this.form = {
            name:row.name,
            departId:row.depart_id,
            id:row.id
        }
        this.departId = row.depart_id;
        this.editIndex = index;
    },
    handleClick() {
        if (this.isEdit) {
            this.updatePosition();
        }else{
            this.addNewUnit();

        }
    },
    currentPageChange(val) {
      this.currentPage = val;
      this.getPositionList();
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    removeUnit(data) {
      this.$confirm("是否删除该职位, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.removeUnits(data);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消删除",
          });
        });
    },
    async addNewUnit() {
      try {
        if (this.form.name.length < 1) {
          this.$message({
            type: "error",
            message: "名称不能为空",
          });
          return;
        }
        var params = {
          name: this.form.name,
          depart_id: this.departId,
        };
        const result = await insertPosition(params);
        if (result.code == 200) {
          this.$message({
            type: "success",
            message: result.msg,
          });
            this.closehandle();
          this.getPositionList();
        this.$refs['form'].resetFields();
        }
      } catch (error) {
        this.$message({
          type: "error",
          message: error.message,
        });
      }
    },
async updatePosition(){
 try {
        if (this.form.name.length < 1) {
          this.$message({
            type: "error",
            message: "名称不能为空",
          });
          return;
        }
        var params = {
          name: this.form.name,
          depart_id: this.departId,
          id:this.form.id
        };
        const result = await updatePosition(params);
        if (result.code == 200) {
          this.$message({
            type: "success",
            message: result.msg,
          });
          this.closehandle();
          this.getPositionList();
        this.$refs['form'].resetFields();
        }
      } catch (error) {
        this.$message({
          type: "error",
          message: error.message,
        });
      }
},
    async getPositionList() {
      try {
        var params = {
          page: this.currentPage,
          pageSize: this.currentPageSize,
        };
        const result = await getPositionList(params);
        if (result.code == 200) {
          this.positionList = result.data.list;
          this.totalCount = result.data.total;
          this.pageCount = result.data.pages;
          this.reload();
        }
      } catch (error) {
        this.$message({
          type: "error",
          message: error.message,
        });
      }
    },
    changeValue(row) {
      console.log(row);
    },
    addChangeValue(row) {
      console.log(row);
    },
    async removeUnits(data) {
      try {
        let params = {
          id: data,
        };
        const result = await deletePosition(params);
        if (result.code == 200) {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getPositionList();
        }
      } catch (error) {
        this.$message({
          type: "error",
          message: error.message,
        });
      }
    },
  },
};
</script>

<style lang="less">
.buttons-content {
  margin: 10px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
}
.page-bottom {
  margin: 10px;
}
.addunit-button {
  width: 100%;
  height: 44px;
  text-align: center;
  .el-button {
    width: 120px;
  }
}

.addunit-title {
  width: 100%;
  height: 44px;
  line-height: 44px;
  text-align: center;
  align-items: center;
  background-color: #67c23a;
  color: #fff;
  border-radius: 8px 8px 0px 0px;
}
.addunit-card {
  width: 280px;
  margin: 10px auto;
  border-radius: 4px;
  box-shadow: 10px 10px 5px #dddddd;
  padding-bottom: 10px;
  .el-input {
    width: 80px;
  }
}
.addunit-content {
  margin: 10px;
}
</style>